<template>
  <a-layout>
    <a-layout-header class="lib-title">
      {{libDocData.title}}
    </a-layout-header>
    <a-layout-content style="padding-top:10px">
      <a-steps direction="vertical" v-if="libDocData.docList.length>0" :current="-1">
        <a-step v-for="(item,index) in libDocData.docList" :key='index'>
          <template #title>
            <span>{{item.label}}</span>
          </template>
          <template #description>
            <pre v-if='item.type==="pre"'>{{item.value}}</pre>
            <pre v-else-if='item.type==="slot"'>
                <slot :name="item.slotName"></slot>
            </pre>
            <span v-else>{{item.value}}</span>
          </template>
        </a-step>
      </a-steps>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts">
import { LibDocInterface } from '@/service/LibDocService'
import { defineComponent, PropType } from 'vue'
export default defineComponent({
    name: 'i-lib-doc',
    props: {
        libDocData: {
            type: Object as PropType<LibDocInterface>,
            required: true
        }
    },
    setup () {
        return {}
    },
    methods: {},
    components: {}
})
</script>

<style lang="scss" scoped>
.lib-title {
  border-bottom: 1px solid #f0f0f0;
  line-height: 35px;
}
</style>
